<template>
	<div>
		<div class="news-content-box">
			<p class="news-title-text">{{info.name}}</p>
			<div class="news-date-box">
				<span>发布时间：{{info.create_time}}</span>
				<span>浏览数：{{info.num}}</span>
			</div>
			<div class="news-detail" v-html="info.content">
				{{info.content}}
			</div>
			<img :src="info.img" alt="" />
		</div>
		<div class="news-pages-box">
			<div v-show="info.previous" class="news-prev-box">
				<div @click="detail(info.previous ? info.previous.id : '')">
					<span>{{ $t('last') }}：</span>
					<span>{{ info.previous ? info.previous.name : '' }}</span>
				</div>
			</div>
			<div v-show="info.next" class="news-next-box">
				<div @click="detail(info.next ? info.next.id : '')">
					<span>{{ $t('next') }}：</span>
					<span>{{ info.next ? info.next.name : '' }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		async asyncData({
			params,
			$axios,
			store
		}) {
			const data = await $axios.$post('news/detail', {
				language: store.state.locale,
				news_id: params.id,
			})
			const result = JSON.parse(data).data
			return {
				info: result,
				id: params.id
			}
		},
		methods: {
			async getData() {
				const data = await this.$axios.$post('news/detail', {
					language: localStorage.getItem('lang'),
					news_id: this.id,
				})
				this.info = JSON.parse(data).data
			},
			async detail(id) {
				if (id) {
					const data = await this.$axios.$post('news/detail', {
						language: localStorage.getItem('lang'),
						news_id: id || this.id,
					})
					this.info = JSON.parse(data).data
				}
			},
		},
		watch: {
			'$store.state.locale'() {
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scope>
	.news-content-box {
		padding-bottom: 15px;
		border-bottom: 1px solid #ddd;
		margin-bottom: 25px;

		.news-title-text {
			font-size: 20px;
			text-align: center;
		}

		.news-date-box {
			color: #666;
			font-size: 12px;
			text-align: center;
			margin-bottom: 15px;
		}

		img {
			max-width: 100%;
		}
	}

	.news-detail p>>>img {
		max-width: 100%;
	}

	.news-pages-box {
		display: flex;
		font-size: 12px;
		justify-content: space-between;

		.news-next-box {
			cursor: pointer;
			font-size: 12px;
			margin-left: auto;
		}

		.news-prev-box {
			cursor: pointer;
			font-size: 12px;
		}
	}
</style>
